<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pen {
            width: 50px;
            height: 50px;
            background: aqua;
            border-radius: 50%;
            position: absolute;
        }

    </style>
</head>
<body>
<section id="board"></section>

<script>
    onload = () => {

        let board = document.querySelector('#board')


        for (let i = 0; i < 50; i++) {
            board.innerHTML += '<div class="pen"></div>';
        }
        //抓取所有div
        let pens = document.querySelectorAll('.pen');
        document.onmousemove = ev => {
            //荧光笔左边距离=鼠标横坐标-荧光笔的宽度
            pens[0].style['left'] = ev.clientX - pens[0].offsetWidth / 2 + 'px';
            //荧光笔上边距离=鼠标纵坐标-荧光笔的高度
            pens[0].style['top'] = ev.clientY - pens[0].offsetHeight / 2 + 'px';
            for (let i = pens.length - 1; i > 0; i--) {
                pens[i].style['left'] = pens[i - 1].style['left'];
                pens[i].style['top'] = pens[i - 1].style['top'];
            }
        }

    }
</script>
</body>
</html>